<template>
  <!--搜索-->
  <div>
    <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        show-action
        @search="onSearch"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <div v-show="searchList.length<1" class="images">
      <!--      <div v-for="item in list" :key="item.postsId" :style="{backgroundImage:`url(${item.coverImgUrl})`}"></div>-->
      <router-link v-for="item in list" :key="item.postsId" :src="item.coverImgUrl" :to="{path:'/nodeDetail',query:{postsId:item.postsId}}"
                   alt="" class="img" tag="img"></router-link>
    </div>
    <div v-show="searchList.length>0" class="searchShow">
      <nodes :search-list="searchList"></nodes>
    </div>
  </div>
</template>

<script>
import {Toast} from 'vant';
import {getNoteList} from '../api/api'
import nodes from "@/components/Nodes";

export default {

  name: "Search",
  data() {
    return {
      value: '',
      list: [],
      searchList: [],
    };
  },
  components: {
    nodes
  },
  created() {
    getNoteList().then(res => {
      // console.log(res.rows)
      res.rows.forEach((item, index) => {
        if (index > res.rows.length - 40 && item.coverImgUrl != 'undefined') {
          this.list.unshift(item)
        }
      })
      // console.log(  this.list)
    })
  },
  methods: {
    onSearch() {
      let val = this.value
      // console.log(val);
      getNoteList("", val).then(res => {
        // console.log(res.rows);
        if (res.rows.length < 1) {
          Toast.fail(val + '未检索到内容');
        } else {
          this.searchList = res.rows
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.images {
  display: flex;
  flex-wrap: wrap;
  margin: 50px 0;
  position: relative;

  img {
    width: 32.5%;
    height: 120px;
    margin: 1px;
  }

  img:nth-of-type(2) {
    width: 65%;
    height: 240px;
  }

  img:nth-of-type(3) {
    position: absolute;
    top: 122px;
  }

  img:nth-of-type(10) {
    width: 65%;
    height: 240px;
  }

  img:nth-of-type(12) {
    position: absolute;
    top: 607px;
    right: 5px;
  }
}

.searchShow {
  width: 100%;
  margin-bottom: 50px;
  margin-top: 54px;
}

/deep/ .van-search {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 5;
}
</style>